<template>
	<view class="custom-tabbar">
		<view class="tab-group">
			<view class="tab-item" :class="{ 'active': currentPage === 0 }" @click="switchTab(0, '/pages/index/index')">
				<image
					:src="currentPage === 0 ? '/static/images/tabbar/home-active.png' : '/static/images/tabbar/home.png'"
					class="icon" />
				<text>首页</text>
			</view>
			<view class="tab-item" :class="{ 'active': currentPage === 1 }"
				@click="switchTab(1, '/pages/policy/index')">
				<image
					:src="currentPage === 1 ? '/static/images/tabbar/policy-active.png' : '/static/images/tabbar/policy.png'"
					class="icon" />
				<text>政策智库</text>
			</view>
		</view>

		<view class="tab-center" @click="goToWebView(2)">
			<image src="/static/images/tabbar/topimg.png" class="top-icon">
			</image>
			<image src="/static/images/tabbar/robot-active.png" class="robot-icon" />
		</view>

		<view class="tab-group">
			<view class="tab-item" :class="{ 'active': currentPage === 3 }" @click="switchTab(3, '/pages/guide/index')">
				<image
					:src="currentPage === 3 ? '/static/images/tabbar/guide-active.png' : '/static/images/tabbar/guide.png'"
					class="icon" />
				<text>申报指南</text>
			</view>
			<view class="tab-item" :class="{ 'active': currentPage === 4 }" @click="switchTab(4, '/pages/my/index')">
				<image :src="currentPage === 4 ? '/static/images/tabbar/my-active.png' : '/static/images/tabbar/my.png'"
					class="icon" />
				<text>我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			currentPages: Number
		},
		computed: {
			currentPage() {
				return this.currentPages
			}
		},
		methods: {
			switchTab(index, path) {
				this.$emit('tabChange');
				uni.switchTab({
					url: path
				});
			},
			goToWebView(index) {
				uni.navigateTo({
					url: `/pages/robot/index`
				})
			}
		}
	};
</script>

<style>
	.custom-tabbar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 130rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		background: #fff;
		padding: 0 20rpx;
		box-sizing: border-box;
		border: 1px solid #f0f2f9;
		border-radius: 30rpx 30rpx 0 0;
	}
	.custom-tabbar .tab-group:nth-child(1) .tab-item:nth-child(1) image {
		width: 49rpx;
		height: 51rpx;
	}
	.custom-tabbar .tab-group:nth-child(1) .tab-item:nth-child(2) image {
		width: 47rpx;
		height: 49rpx;
	}
	.custom-tabbar .tab-group:last-child .tab-item:nth-child(1) image {
		width: 45rpx;
		height: 48rpx;
	}
	.custom-tabbar .tab-group:last-child .tab-item:nth-child(2) image {
		width: 46rpx;
		height: 49rpx;
	}
	.tab-group {
		flex: 1;
		display: flex;
		justify-content: space-around;
		margin-bottom: 10rpx;
	}
	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.tab-item.active {
		opacity: 1;
	}
	.tab-item text {
		font-size: 22rpx;
		color: #242d39;
		margin-top: 10rpx;
	}
	.robot-icon {
		position: absolute;
		left: 0;
		top: -18rpx;
		width: 138rpx;
		height: 121rpx;
	}

	.top-icon {
		position: absolute;
		left: 50%;
		margin-left: -56rpx;
		top: -30rpx;
		width: 112rpx;
		height: 30rpx;
	}
	.tab-center {
		position: relative;
		width: 138rpx;
		height: 121rpx;
	}
</style>